<template>
  <div class="merchant-list-container">
    <!-- 头部 -->
    <!-- <Header /> -->
    
    <!-- 主体内容 -->
    <div class="main-content">
      <div class="merchant-list-wrapper">
        <!-- 搜索栏 -->
        <div class="search-bar">
          <el-input
            placeholder="搜索商家"
            v-model="searchKeyword"
            @keyup.enter.native="handleSearch"
            clearable
            class="search-input">
            <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
          </el-input>
        </div>
        
        <!-- 筛选条件 -->
        <div class="filter-section">
          <!-- 排序方式 -->
          <div class="filter-item">
            <span class="filter-label">排序：</span>
            <el-radio-group v-model="sortBy" size="small" @change="handleSortChange">
              <el-radio-button label="default">默认排序</el-radio-button>
              <el-radio-button label="sales">销量优先</el-radio-button>
              <el-radio-button label="rating">评分优先</el-radio-button>
            </el-radio-group>
          </div>
          
          <!-- 评分筛选 -->
          <div class="filter-item">
            <span class="filter-label">评分：</span>
            <el-select v-model="ratingFilter" placeholder="评分筛选" size="small" @change="handleRatingChange">
              <el-option label="全部" value=""></el-option>
              <el-option label="4.5分以上" value="4.5"></el-option>
              <el-option label="4分以上" value="4.0"></el-option>
              <el-option label="3.5分以上" value="3.5"></el-option>
            </el-select>
          </div>
          
          <!-- 销量筛选 -->
          <div class="filter-item">
            <span class="filter-label">销量：</span>
            <el-select v-model="salesFilter" placeholder="销量筛选" size="small" @change="handleSalesChange">
              <el-option label="全部" value=""></el-option>
              <el-option label="月售100+单" value="100"></el-option>
              <el-option label="月售50+单" value="50"></el-option>
              <el-option label="月售20+单" value="20"></el-option>
            </el-select>
          </div>
        </div>
        
        <!-- 商家列表 -->
        <div class="merchant-list">
          <el-row :gutter="20">
            <el-col :span="8" v-for="merchant in merchants" :key="merchant.id">
              <div class="merchant-card" @click="goToMerchantDetail(merchant.id)">
                <div class="merchant-image">
                  <img :src="merchant.shopLogo || 'https://via.placeholder.com/300x200'" :alt="merchant.name">
                </div>
                <div class="merchant-info">
                  <div class="merchant-name">{{ merchant.shopName }}</div>
                  <div class="merchant-rating">
                    <el-rate
                      v-model="merchant.rating"
                      disabled
                      text-color="#ff9900">
                    </el-rate>
                    <span class="rating-value">{{ merchant.rating }}分</span>
                  </div>
                  <div class="merchant-meta">
                    <span class="merchant-sales">月售 {{ merchant.monthlySales }} 单</span>
                    <span class="merchant-delivery-time">30分钟送达</span>
                  </div>
                  <div class="merchant-desc">{{ merchant.description }}</div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        
        <!-- 分页器 -->
        <div class="pagination-container" v-if="total > 0">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="pageSize"
            :current-page.sync="currentPage"
            @current-change="handlePageChange">
          </el-pagination>
        </div>
        
        <!-- 无数据提示 -->
        <div class="no-data" v-if="merchants.length === 0">
          <i class="el-icon-warning-outline"></i>
          <p>没有找到相关商家</p>
        </div>
      </div>
    </div>
    
    <!-- 底部 -->
    <Footer />
  </div>
</template>

<script>
import Header from '@/components/Header'
import Footer from '@/components/Footer'
import { getOpenMerchants } from '@/api/merchant'
import { getUrlParam } from '@/utils'

export default {
  name: 'MerchantList',
  components: {
    Header,
    Footer
  },
  data() {
    return {
      // 搜索关键词
      searchKeyword: '',
      // 选中的分类
      selectedCategory: '',
      // 排序方式
      sortBy: 'default',
      // 评分筛选
      ratingFilter: '',
      // 销量筛选
      salesFilter: '',
      // 当前页码
      currentPage: 1,
      // 每页条数
      pageSize: 9,
      // 总条数
      total: 0,
      // 商家列表
      merchants: [],
      // 分类列表
      categories: [
        { id: 1, name: '快餐便当' },
        { id: 2, name: '特色小吃' },
        { id: 3, name: '甜品饮品' },
        { id: 4, name: '果蔬生鲜' },
        { id: 5, name: '正餐优选' }
      ]
    }
  },
  created() {
    // 从URL获取分类参数
    const categoryId = getUrlParam('category')
    if (categoryId) {
      this.selectedCategory = parseInt(categoryId)
    }
    
    // 获取商家列表
    this.fetchMerchants()
  },
  methods: {
    // 获取商家列表
    fetchMerchants() {
      // 构建请求参数
      const params = {
        page: this.currentPage,
        size: this.pageSize
      }
      
      // 添加搜索关键词（后端使用shopName参数）
      if (this.searchKeyword) {
        params.shopName = this.searchKeyword
      }
      
      // 添加排序方式
      if (this.sortBy !== 'default') {
        if (this.sortBy === 'sales') {
          params.orderBy = 'sales_desc';
        } else if (this.sortBy === 'rating') {
          params.orderBy = 'rating_desc';
        }
      }
      
      // 添加评分筛选
      if (this.ratingFilter) {
        params.minRating = parseFloat(this.ratingFilter);
      }
      
      // 添加销量筛选
      if (this.salesFilter) {
        params.minSales = parseInt(this.salesFilter);
      }
      
      // 请求商家列表
      getOpenMerchants(params).then(response => {
        if (response.code == 200) {
          this.merchants = response.data || []
          this.total = response.total || 0
          
          // 如果没有数据，显示提示
          if (this.merchants.length === 0 && this.searchKeyword) {
            this.$message.info(`没有找到与"${this.searchKeyword}"相关的商家`)
          }
        } else {
          this.$message.error(response.message || '获取商家列表失败')
        }
      }).catch(error => {
        console.error('获取商家列表失败', error)
        this.$message.error('获取商家列表失败，请稍后再试')
      })
    },
    // 处理搜索
    handleSearch() {
      this.currentPage = 1
      this.fetchMerchants()
    },
    // 处理评分变更
    handleRatingChange() {
      this.currentPage = 1
      this.fetchMerchants()
    },
    
    // 处理销量变更
    handleSalesChange() {
      this.currentPage = 1
      this.fetchMerchants()
    },
    // 处理排序变更
    handleSortChange() {
      this.currentPage = 1
      this.fetchMerchants()
    },
    // 处理页码变更
    handlePageChange(page) {
      this.currentPage = page
      this.fetchMerchants()
    },
    // 跳转到商家详情页
    goToMerchantDetail(merchantId) {
      this.$router.push(`/merchants/${merchantId}`)
      // this.$message.info('商家详情页面尚未实现')
    }
  }
}
</script>

<style scoped>
.merchant-list-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.main-content {
  flex: 1;
  padding: 30px 0;
  background-color: #f5f7fa;
}

.merchant-list-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.search-bar {
  margin-bottom: 20px;
}

.search-input {
  width: 400px;
}

.filter-section {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.filter-item {
  margin-bottom: 15px;
}

.filter-item:last-child {
  margin-bottom: 0;
}

.filter-label {
  display: inline-block;
  width: 60px;
  font-weight: bold;
}

.merchant-list {
  margin-bottom: 30px;
}

.merchant-card {
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s;
  margin-bottom: 20px;
}

.merchant-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.merchant-image {
  height: 150px;
  overflow: hidden;
}

.merchant-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.merchant-info {
  padding: 15px;
}

.merchant-name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.merchant-rating {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.rating-value {
  margin-left: 5px;
  color: #ff9900;
}

.merchant-meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 14px;
  color: #666;
}

.merchant-desc {
  font-size: 14px;
  color: #999;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pagination-container {
  text-align: center;
  margin-top: 30px;
}

.no-data {
  text-align: center;
  padding: 50px 0;
  color: #909399;
}

.no-data i {
  font-size: 48px;
  margin-bottom: 10px;
}
</style> 